/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-12 09:33:22
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-22 14:14:28
 * @FilePath: \crm_customer\src\components\workorder\WorkHead.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react'
import { Button,Input,DatePicker,ConfigProvider,Modal  } from 'antd';
import {NavLink,Outlet} from 'react-router-dom'
import zhCN from 'antd/lib/locale/zh_CN'

// import WorkList from './WorkList';
// import Mystarted from './Mystarted';
// import Myjoin from './Myjoin';
import { DownOutlined } from "@ant-design/icons";
import { inject,observer } from 'mobx-react';
import AddWorkorder from './AddWorkorder';
import '../../assets/css/workordercss/workHead.css'

 function WorkHead(props) {
 
 
  const { RangePicker } = DatePicker;
  // const [ setclassrouter] = useState(0);
  const [classsousuo, setclasssousuo] = useState(true);
  const [arrowchange, setArrowchange] = useState(false);
  const [visible, setVisible] = useState(false);
  // function clickCliss(e) {
  //   setclassrouter(e.currentTarget.getAttribute("data-index"));
  // }
  function sousuo() {
    console.log(classsousuo);
    setclasssousuo(!classsousuo);
    setArrowchange(!arrowchange);
  }
  const  getList=()=>{
 
    // let  obj={
    //   currentPage:1,pageSize:5
    // }
    let currentPage=1
    let pageSize=10
    props.workOrderStore.findAllWorkOrderList(currentPage,pageSize)
  }
  const Mystarted=()=>{
    let currentPage=1
    let pageSize=5
    let user_name=2
    props.workOrderStore.Mystarted(currentPage,pageSize,user_name)
  }
  const Myjoin=()=>{
    let currentPage=1
    let pageSize=5
    let assigned_personnel='张三'
    props.workOrderStore.Myjoin(currentPage,pageSize,assigned_personnel)
  }
  const searchBtn=(e)=>{
    console.log(e.target.value);
    let currentPage=1
    let pageSize=5
    let condition=e.target.value
    props.workOrderStore.SearchBtn(currentPage,pageSize,condition)
  }
  const addBtn=()=>{
    setVisible(true)
    let currentPage=1
    let pageSize=5
    props.workOrderStore.AddBtn(currentPage,pageSize)
 }
  return (
    <div className='workheadDiv'>
    <ConfigProvider locale={zhCN}>
    <NavLink  to='/home/worklist' ><Button className='WorkListBtn' onClick={getList}>工单列表</Button></NavLink>
    <NavLink to='/home/Mystarted'><Button className='myStartBtn' onClick={Mystarted}>我发起的</Button></NavLink>
    <NavLink to='/home/Myjoin'><Button className='myJoinBtn' onClick={Myjoin}>我参与的</Button></NavLink>
    <Button className='AddWorkOrder' onClick={addBtn}>新增工单</Button>
    
    <Button onClick={sousuo} className='AdvancedSearch'>
    高级搜索
    <DownOutlined className={arrowchange ? "arrowup" : "arrowdown"} />
    </Button>
    <Button className='searchBtn' onClick={searchBtn}>搜索</Button>
    <Input placeholder="客户名称、手机号、指派人员"  className='seacrInput' onChange={(e)=>{searchBtn(e)}}/>
    
    <div className={classsousuo ? "sousuonone" : "sousuoblock"}>
    <div id='heighSearch'>
<div className='left'>
 <ul>
 <li><span>编号</span><span><input type="text" /></span></li>
 <li><span>工单类型</span><span><select>
 <option>请选择</option>
 <option>售后工单</option>
 <option>订单配送</option>
 </select></span></li>
 <li>
 <span>结束时间</span> 
 <RangePicker />
 </li>
 <li>
 <span>发起时间</span> 
 <RangePicker />
 </li>
 </ul>
 </div>
 <div className='middle'>
<ul>
 <li><span>客户名称</span><span><input type="text" /></span></li>
 <li><span>指派人员</span><span><input type="text" /></span></li>
 <li><span>交通方式</span><span><select>
 <option>请选择</option>
 <option>火车</option>
 </select></span></li>
 <li><span>发起人</span><span><select>
 <option>请选择</option>
 </select></span></li>
</ul>
 </div>
 <div className='right'>
 <ul>
 <li><span>客户联系人</span><span><input type="text" /></span></li>
 <li><span>起始时间</span> <RangePicker /></li>
 <li><span>差旅联系人</span><span><input type="text" /></span></li>
</ul>
 </div>

  </div>
  <div className="btnitem">
  <button>立即搜索</button>
   <button>清空条件</button>
   </div>
   {/*模态框*/}
   <Modal
   title="新增工单【第一步：选择客户名称】"
   centered
   visible={visible}
   onOk={() => setVisible(false)}
   onCancel={() => setVisible(false)}
   width={1000}
   >
   <AddWorkorder/>
 </Modal>

   </div>
   <Outlet/>
   {/* 
     <Routes>
    <Route path="/" element={<WorkList/>} exact />
    <Route path='/WorkList' element={<WorkList/>}/>
    <Route path='/Mystarted' element={<Mystarted/>}/>
    <Route path='/Myjoin' element={<Myjoin/>}/>
    </Routes>*/}
 
    </ConfigProvider>
    </div>
  )
}

export default inject('workOrderStore')(observer(WorkHead))